本文结合了个人在 VSCode IDE 中使用 GitHub Copilot 的经验，并参考了 Github Blog 上的 How to use Copilot in your codebase 一文，其中举例使用的编程语言为 JavaScript。

安装

先简单地说一下安装：

  1. 打开Visual Studio Code（VScode）。
  2. 进入扩展商店，点击左侧图标或使用快捷键Ctrl + Shift + X。
  3. 在搜索框中输入“Github Copilot”，点击搜索按钮。
  4. 找到“Github Copilot”和“Github Copilot Chat”扩展，点击安装。

image

目前只需要在Github上有加入HelloTalk的组织，并在VScode上登录Github账号就可以正常使用这两个扩展了。

image

Github Copilot

基本使用
Github Copilot 的使用非常简单，我们可以在编码的过程中轻松地体验到自动补全代码的便利。比如我在编码过程中声明了一个变量名为 debounce（防抖函数），不到一秒的时间他就能够提示我接下来该书写的内容了，此时我只需要通过快捷键Tab就可以将这段提示插入到我的代码中。

image

快捷键

  1. 接受建议：：
  • 快捷键：Tab键
  • 描述：在输入代码提示后，按下Tab键即可生成相应的代码片段。
  1. 接受部分建议：
  • 快捷键：Command + → 键
  • 描述：不一次性接受完当前的所有的代码建议，而是将部分段落插入到光标处。
  1. 拒绝建议：
  • 快捷键：Esc键
  • 描述：如果不想接受当前的建议，按下Esc键可以取消当前的提示。
  1. 上一条建议：
  • 快捷键：Alt/Option + [
  • 描述：查看上一条建议
  1. 上一条建议：
  • 快捷键：Alt/Option + ]
  • 描述：查看下一条建议
  1. 显示更多建议：
  • 快捷键：Ctrl + Enter
  • 描述：手动触发显示更多的代码建议。

常见的使用

  • 在注释中直接提问，或者通过Q&A的方式，比如输入一个q: xxx，它便会在下一行中以a: xxx的方式简单补全。
    image
  • 生成常见函数。比如我在注释中写入”节流函数”，它就能够在我的下一行中提示有关于节流函数的代码。
    image
  • 生成算法函数，也可以通过这种格式去更细节的定制函数。
    image
  • 在前端开发的过程中，模拟数据调试是很经常做的事情，我们可以声明一个变量mockXXXXList，并且写入一个数组成员提供给它模仿，它就能够帮助我们完成这项繁琐的工作。
    image
  • 或者通过类型定义，他也能够非常聪明地去mock数据
    image

进阶使用

其实在上文中的一些示例中，对于 Github Copilot 的探索还不够深入，就拿防抖函数来说，它属于是一个经典的函数，我到网上谷歌就能得到和它一样甚至更优的结果。而当我们直接给到他一个相对比较复杂的任务时，比如我在注释中直接要求它”构建一个Markdown编辑器“，光靠这简短的要求，它在这种情况只能给出简单或错误的结果，所以了解如何更加细化的使它生成更优质的内容才是学习它的关键，这里用它的博客上比较好的 🌰 并结合我自己的语言来感受一下：

3个 GitHub Copilot 提示制作的最佳实践
  1. 用高层次目标设定舞台。🖼️（提供高级上下文）
    如果你有一个空文件或空代码库，这将非常有帮助。换句话说，如果 GitHub Copilot 对接下来需要构建或完成的内容一无所知，为它设定舞台将非常有用。在深入细节之前，通过一个大致的描述来引导 GitHub Copilot 生成有关您要构建的内容是很有帮助的。
    在提示GitHub Copilot时，将该过程视为与某人进行对话：我应该如何分解问题，以便我们一起解决呢？我应该如何与这个人一起进行编程？
    例如，当在Next.js中构建一个Markdown编辑器时，我们可以在顶部写一个类似于这样的注释：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /*
    - 使用以下功能在Next.js中创建一个基本的Markdown编辑器：
    - 使用React hooks
    - 为Markdown创建带有默认文本“在此键入Markdown”的状态
    - 提供用户可以编写Markdown的文本区域
    - 当我键入时显示Markdown文本的实时预览
    - 支持基本的Markdown语法，如标题、加粗、斜体
    - 使用React markdown npm包
    - Markdown文本和生成的HTML应保存在组件的状态中，并实时更新
    */
    这将促使GitHub Copilot生成以下代码，并在不到30秒的时间内生成一个非常简单但功能齐全的Markdown编辑器。我们可以利用剩余的时间来为组件添加样式：
    image
  2. 请求简单而具体。目标是从GitHub Copilot获得简短的输出。🗨️（拆解问题，逐步输出简洁并精准）
    一旦你将主要目标传达给它，详细说明实现该目标所需的逻辑和步骤。将事情分解时，GitHub Copilot更好地理解您的目标。（想象一下，您正在编写食谱，会将烹饪过程分解为离散的步骤，而不是写一段描述您想制作的菜肴的段落。）
    让GitHub Copilot在每个步骤之后生成代码，而不是一次生成一堆代码。
    以下逐步为 GitHub Copilot 输入提示，定制一个我想要的处理字符串函数：
    我们通过逐一编写六个提示，引导GitHub Copilot逐步逆转一个句子。这使GitHub Copilot能够在移动到文本之前为一个提示生成建议。这也给了我们在转到下一步之前调整建议代码的机会。
    使用的六个提示是：
  3. 首先，如果不是“I”，让句子的第一个字母小写。
  4. 接下来，让我们把这个句子拆分成一个单词数组
  5. 然后，让我们从句子中拿出所有标点符号
  6. 现在，让我们删除句子中的标点符号
  7. 让我们把这个句子颠倒一下，把它连起来
  8. 最后，让我们将句子的第一个字母大写并添加标点符号.
    最终可以得到这样一个函数，通过注释也可以比较直观的看出整个函数的原理，也具有非常高的可读性。
    image
  9. 给 GitHub Copilot 一个或两个例子。✍️
    从例子中学习不仅对人有用，对于Github Copilot也是如此。例如，我们想从下面的数据数组中提取姓名并将其存储在新数组中：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const data = [
      [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 }
      ],
      [
        { name: 'Bob', age: 40 }
      ]
    ];
    当没有向GitHub Copilot展示一个例子时：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 遍历一个包含对象数组的数组，以转换数据。
    const data = [
      [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 }
      ],
      [
        { name: 'Bob', age: 40 }
      ]
    ];

    const mappedData = data.map(x => [x.name](http://x.name/));

    console.log(mappedData);

    // Results: [undefined, undefined]

    在这里它生成了一个错误使用Map的代码。
    而相比之下，当我们提供了一个例子时：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 遍历一个包含对象数组的数组，以转换数据。
    // 例子:从数据数组中提取名字 
    // 期望的结果:['John'， 'Jane'， 'Bob']
    const data = [
      [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }],
      [{ name: 'Bob', age: 40 }]
    ];

    const mappedData = data.flatMap(sublist => sublist.map(person => person.name));

    console.log(mappedData);
    我们得到了我们期望的结果。
    额外技巧
    通过写好清晰的注释，我们不仅有助于 Copilot 生成更高质量的代码，同时也能提升团队开发者更迅速理解代码的速度。此外，善用 Copilot 的技巧实际上蕴含在我们日常开发中的细节中，尤其是在代码风格一致的项目中，它能够快速学习并提取出你熟悉的代码，从而更快速地完成代码补全。
    保持几个相关选项卡打开
    GitHub Copilot 使用一种称为「相邻选项卡」的技术，简单来说它并不仅仅只会将你目前所处在的文件作为上下文，还会将你在IDE中打开的其他文件也作为上下文。
    不过在这里并没有明确说明可以关联到多少选项卡作为上下文，不能保证会将所有打开的文件都视为必要上下文。
    良好的编码习惯
    举例来说，假如我将要书写一个求和函数，但我却将这个函数命名为一个糟糕的变量名 abc，这种情况下就很难享受到 Copilot 的代码补全。
    而将变量名替换为sum，Copilot 很快就给出了回应。

Github Copilot Chat

Github Copilot 是自动补全代码的工具，而接下来要说的 Github Copilot Chat 就是能够主动去提问并解决编程问题的助手。
基本使用
它就像是在IDE中嵌入了一个 ChatGPT，用法也和 ChatGPT 相似，只需要打开 VSCode 中的主侧栏就能看到有了一个 Chat 的选项，在输入框中用自然语言去提问编程相关的问题即可。
与 ChatGPT 的差异
不过使用起来就会发现它们两者之间的区别，比如说 Copilot Chat 它无法任何和编程无关的问题，这里其实是为了让他成为更加专业的 AI 编程助手，不仅让它内置了一些强大的功能以外，还内置了不少提示词（其中就包含不能回答与开发无关的问题及诸多限制）。
image

Github Copilot Chat 的 Prompts

🔗 大佬挖出了它内置的提示词: https://twitter.com/marvinvonhagen/status/1657113929661702145
另外，虽然说它对输出做了很多限制，但通过提示来引导还是能够让它回答出我们想知道的问题，比如说我想提问它“早上吃什么能够比较精神？”

可以看到，一开始我的问题并没有关联到开发方面，所以他会直接让我去咨询营养专家或医生，并不会给我额外的回复，而在我修改我的提问关联到开发方面时，它就能够开始正常回答我的问题了。（毕竟底层都是基于大语言模型，通过多步的提示还是能误导它的理解能力的）

功能使用

选中内容

可以在文件中选中内容再去提问，可以省去描述或复制粘贴的过程，让 Copilot Chat 直接聚焦在某一行或者某一块代码片段上来回答问题。当然，他还是会联系该文件中的上下文的。
image

内联提问

Copilot Chat 不仅能够通过主侧栏的 Chat 主动聊天，还可以通过快捷键 command+I 来调起内联输入框来提问，且不仅限于文件内，在终端也是可以调起的。

  • 文件中
    image
  • 终端中
    image

内置命令

  • @workspace 询问关于你的工作区的问题
    • /explain - 解释选定代码的工作原理
    • /tests - 为选定的代码生成单元测试
    • /fix - 提出修复选定代码中问题的建议
  • @vscode 询问关于VS Code的问题
    • /search - 为工作区搜索生成查询参数
    • /api - 询问关于VS Code扩展开发的问题
  • @terminal 询问如何在终端中执行某些操作
    在 Copilot Chat 的输入框中输入 “@” 可以快速让它聚焦在关于某相关的问题，输入 “/“ 可以使用到相关问题里它内置好的命令。
    例如我想提问有关于VScode (@vscode) 的问题，再输入 “/“ 它就会提示相关能够使用的命令。
工作区命令（@workspace)

接下来介绍一下工作区的命令，也是我认为值得一提的。先结合上文中 Github Copilot 的使用来生成一个大整数相加的函数来配合后续举例。

image

/tests 测试

作用：生成单元测试文件。
现在，我需要对刚刚生成的这个add函数做一个单元测试，可以通过 /tests 在描述一些细节来帮助我完成这项任务。
image
在这里它很快就生成了对应的单元测试文件 index.test.js，然后我们就可以来执行命令进行测试咯。
image

好好好，在终端区域可以看到这个单元测试并没有成功的运行起来，正好引出下一个内置命令/fix。

/fix 修复

作用：修复问题
将这个测试文件全选，command + I再输入/fix，把这个错误告诉给它
image

然后它就在文件的首处引入了刚刚index.js中的add函数。
最终再执行一次测试命令。
image

/explain 解释

作用：纯粹的解释
顾名思义，当我看到一段不懂的代码我就可以将内容选中交给 Copilot Chat输出对应的解释，或者针对这个片段中的某个位置提出问题。
image

而这在阅读源码过程的中也能起到比较大的帮助

/doc 注解

作用：生成注释
在前端这个领域里接触的广面非常之大，会遇到各种各样的配置项，仅靠记忆而不依靠文档和注释的话是不太现实的。这个指令可以用于快速的生成这些配置项的注释，让后续的维护更加轻松，不用再频繁去翻开对应的文档去查询。

image

或是为函数添加解释，它能够根据内容来总结出功能、参数、返回值，一目了然。

image

查询 API

在使用一些资料不够全面的技术情境下，通过搜索引擎获取的结果可能并不十分准确。这时，通过描述性的提问让 Copilot Chat 帮助搜索 API 会得到意想不到的效果。

建议

引用限制

据说 Copilot Chat 一次性最多能够引用的字符是 6000 多个字符，然而为了确保更高的准确度，建议将引用的内容尽可能缩小聚焦，并将问题拆分为更小的部分。这样做不仅有助于提高引擎的理解能力，还能确保 Copilot Chat 能够更精准地回应您的需求。

结语

在本文中，我们深入研究了 Github Copilot 和 Github Copilot Chat 的使用。尽管 Copilot 在代码生成方面表现强大，但我们强调了良好的代码注释和变量命名对于优化 Copilot 生成的代码质量至关重要。通过关注这些细节，我们可以更有效地与 Copilot 协同工作，产生清晰且可读性更高的代码。
在实际使用中，Copilot 在学习现有代码风格和提供在线代码片段方面表现得非常出色。但是，如果需要创新性代码的情况，它可能无法完全满足期望。
尽管如此，这两个工具在提高开发效率方面仍然是强大的。有时候，它们甚至在编码过程中默默地引导了我们的思路。不过，我们也必须认识到，这些工具可能产生一些错误的输出，因此我们仍需要对其进行仔细的验证和校验。通过巧妙利用这两个工具，我们能够更轻松、更愉快地完成编码任务，提高整体开发效率。